<template>
    <el-container class="yu-wrap">
        <el-header>
            <h1 class="tit" @click="$router.push('/main/home')">语雀</h1>
            <div class="yu-header-con" v-show="$route.path.includes('/main/home')">
                <el-input v-model="key" placeholder="请输入内容" size="mini"></el-input>
                <div>
                    <el-button size="mini" @click="search">搜索</el-button>
                </div>
                <el-popover
                    placement="bottom"
                    width="200"
                    trigger="manual"
                    v-model="visible">
                    <div class="yu-type">
                        <span @click="addWord">新建文档</span>
                        <span @click="goAddStore">新建知识库</span>
                    </div>
                    <el-button slot="reference" @click="visible = !visible">手动激活</el-button>
                </el-popover>
            </div>
            {{username}}
            <div>
                <el-button size="mini" @click="exit">退出</el-button>
            </div>
            <el-dialog
                title="选择知识库"
                :visible.sync="dialogVisible"
                width="80%">
                <el-table
                    :data="storeList"
                    stripe
                    style="width: 100%"
                    @row-click="chooseStore"
                    >
                    <el-table-column
                    prop="title"
                    label="标题"
                    width="180">
                    </el-table-column>
                    <el-table-column
                    prop="intro"
                    label="简介"
                    width="180">
                    </el-table-column>
                </el-table>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>
<script>
    import $api from '../../api/index'
    export default {
        data(){
            return {
                key:'',
                visible:false,
                dialogVisible:false,
                storeList:[],
                username:localStorage.getItem('username')
            }
        },
        methods:{
            goAddStore(){
                this.visible = false;
                this.$router.push('/main/addStore');
            },
            exit(){
                localStorage.clear();
                this.$router.push('/login');
            },
            addWord(){
                $api.getStoreList().then(res => {
                    if(res.code === 1){
                        this.storeList = res.data;
                        this.dialogVisible = true;
                        this.visible = false;
                    }
                })
            },
            chooseStore(row){
                this.dialogVisible = false;
                this.$router.push({path:'/main/addWord',query:{s_id:row.id}})
            },
            search(){
                if(this.key){
                    this.$router.push({path:'/main/search',query:{key:this.key}})
                }
            }
        }
    }
</script>
<style lang="scss">
    .yu-wrap{
        width:100%;
        height: 100%;
    }
    .el-header{
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
        display: flex;
    }
    .yu-header-con{
        display: flex;
    }
    
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        padding:0;
    }
    .yu-type{
        span{
            display: block;
            width:100%;
            height: 40px;
            line-height: 40px;
            border-bottom:1px solid gray;
            text-align: center;
        }
    }
</style>